/**
 * Inspiration for this project found at:
 * https://markus.oberlehner.net/blog/pure-css-animated-svg-circle-chart
 * 1. The `reverse` animation direction plays the animation backwards
 *    which makes it start at the stroke offset 100 which means displaying
 *    no stroke at all and animating it to the value defined in the SVG
 *    via the inline `stroke-dashoffset` attribute.
 * 2. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround.
 */

 .circle-chart {
  width: 160px;
  height: 160px;
  float: left;
  position: relative;
}


.circle-chart__circle {
  stroke: #00acc1;
  stroke-width: 2;
  stroke-linecap: square;
  fill: none;
  animation: circle-chart-fill 5s reverse; /* 1 */ 
  transform: rotate(-30deg); /* 2, 3 */
  transform-origin: center; /* 4 */
}

/**
 * 1. Rotate by -90 degree to make the starting point of the
 *    stroke the top of the circle.
 * 2. Scaling mirrors the circle to make the stroke move right
 *    to mark a positive chart value.
 * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
 *    and Edge, use the transform attribute directly on the SVG element as a
 * .  workaround.
 */

.circle-chart__circle--negative {
  transform: rotate(-30deg) scale(1,-1); /* 1, 2, 3 */
}

.circle-chart__background {
    stroke: #ddd;
    stroke-width: 2;
    fill: none;
}

.circle-chart__info {
  animation: circle-chart-appear 2s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}

.circle-chart__percent {
  display: none;
}

  .circle-chart__subline {
    text-anchor: middle;
    font-size: 12px;
    position: relative;
    font-weight: 700;
    color: rgb(254, 254, 255);
    text-shadow: -2px 0 #F55650, 0 2px #F55650, 2px 0 #F55650, 0 -2px #F55650;
}

.success-stroke {
    stroke: #0D5ADC;
}

.circlechart.style-tow .success-stroke {
    stroke: #0D5ADC;
}

.circlechart.style-three .success-stroke {
    stroke: #6CD5CE;
}

.circlechart.style-four .success-stroke {
    stroke: #F55650;
}

.warning-stroke {
  stroke: #0E58DB;
}

.success-stroke {
  stroke: red;
}

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}